
import React, { useState } from 'react';
import { Button, Drawer, theme } from 'antd';

const HomePage: React.FC = () => {
  
  const { token } = theme.useToken();
  const [open, setOpen] = useState(false);

  const showDrawer = () => {
    setOpen(true);
  };

  const onClose = () => {
    setOpen(false);
  };

  const containerStyle: React.CSSProperties = {
    position: 'relative',
    height: '100%',
    padding: 48,
    overflow: 'hidden',
    background: token.colorFillAlter,
    border: `1px solid ${token.colorBorderSecondary}`,
    borderRadius: token.borderRadiusLG,
  };

  return (
    <div style={containerStyle}>
    <div className="bg-white p-6 rounded-lg shadow-md">
      <h1 className="text-2xl font-bold mb-4">首页</h1>
      
      Render in this
      <div style={{ marginTop: 16 }}>
        <Button type="primary" onClick={showDrawer}>
          Open
        </Button>
      </div>
      <Drawer
        title="Basic Drawer"
        placement="right"
        closable={false}
        onClose={onClose}
        open={open}
        getContainer={false}
      >
        <p>Some contents...</p>
      </Drawer>
    </div>
      <p className="mb-4">欢迎来到我们的应用！</p>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="bg-blue-50 p-4 rounded-md">
          <h2 className="text-lg font-semibold mb-2">用户管理</h2>
          <p>管理系统用户及权限</p>
        </div>
        <div className="bg-green-50 p-4 rounded-md">
          <h2 className="text-lg font-semibold mb-2">产品管理</h2>
          <p>管理系统产品及库存</p>
        </div>
        <div className="bg-amber-50 p-4 rounded-md">
          <h2 className="text-lg font-semibold mb-2">订单管理</h2>
          <p>管理系统订单及状态</p>
        </div>
      </div>
    </div>

  );
};

export default HomePage; 